<template>
	<div>
    <div class="lists-top">
      <search :searchInfo="searchInfo" needIllegal="暂无订单" @search="searchFn"></search>
      <lists-nav :navData="navData" @changeOrderType=changeOrderType></lists-nav>
    </div>
    <div class="lists-wrapper">
      <!-- 全部订单 -->
      <!-- 待付款订单 -->
      <!-- 已付款订单 -->
      <!-- 已发货订单 -->
      <!-- 退换货订单 -->
      <!-- 交易完成订单 -->
      <!-- <lists-all v-if="this.curType==1"></lists-all>      
      <lists-waiting v-if="this.curType==2"></lists-waiting>      
      <lists-payed v-if="this.curType==3"></lists-payed>      
      <lists-delivered v-if="this.curType==4"></lists-delivered>
      <lists-return v-if="this.curType==5"></lists-return>      
      <lists-success v-if="this.curType==6"></lists-success> -->

      <!-- // 1全部 、2 待付款订单、3已确认 、4退换货 、5 可以评论订单、6待确认、 7 已完成 -->
      <lists-all ref="list" @illegal="getIllegal"></lists-all>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
  // import search from './components/search/index'
  import Search from '@/components/Search/index'
  import listsNav from './components/listsNav/index'
  import listsAll from './components/listsAll/index'
  import { getOrderAlias } from '@/api/order/order'
  export default Vue.extend({
    name: 'index',
    components: {
      Search,
      listsNav,
      listsAll
    },
    data() {
      return {
        searchInfo: {
          placeholder: '收件人信息/订单编号/商品名称',
          illegal_msg: '暂无订单'
        },
        query: '',
        curType: 1,
        navData: {
          dhs_type: 0,
          is_allow_exchange: 1,
          is_allow_return: 1,
          ftitle_all_orders: '全部订单',
          ftitle_pending_pay: '待付款',
          ftitle_has_shipped: '已发货',
          ftitle_return_goods: '退换货',
          ftitle_has_pay: '已付款',
          ftitle_has_completed: '已完成',
          curType: 1
        }
      }
    },
    methods: {
      getIllegal(val) {
        this.searchInfo.illegal_msg = val
      },
      // 获取初始订单类型
      getOrderType() {
        this.query = this.$route.query
        if (this.query.type) {
          this.curType = this.query.type || 1
          this.navData.curType = this.curType || 1
        }
        if (this.query.dhs_type) {
          this.navData.dhs_type = this.query.dhs_type
        }
      },
      // 点击搜索
      searchFn(keyword) {
        this.$Bus.$emit('keywordEvent', { keyword: keyword })
      },
      // 切换订单类型
      changeOrderType(type) {
        this.navData.curType = this.curType = type || 1
        this.$Bus.$emit('statusEvent', { status: type })
      },
      // 获取别名
      getOrderAliasFun() {
        getOrderAlias().then(res => {
          if (res.status == 1) {
            const ftitle = res.data
            this.navData.ftitle_all_orders = ftitle.ftitle_all_orders
            this.navData.ftitle_has_shipped = ftitle.ftitle_has_shipped
            this.navData.ftitle_pending_pay = ftitle.ftitle_pending_pay
            this.navData.ftitle_return_goods = ftitle.ftitle_return_goods
            this.navData.ftitle_has_pay = ftitle.ftitle_has_pay
            this.navData.ftitle_has_completed = ftitle.ftitle_has_completed
          }
        })
      }
    },
    beforeRouteUpdate(to, from, next) {
      this.changeOrderType(to.query.type)
      next()
    },
    created() {
      this.getOrderType()
      this.getOrderAliasFun()
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.$refs.list.onLoad()
      })
    },
    /* watch: {
      curType(val) {
        this.navData.curType = val
      }
    } */
  })
</script>

<style lang="scss">
.lists-top{
  position:fixed;
  top:0;
  left:0;
  z-index:3;
  width:100%;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.lists-wrapper{
  padding-top:208px;
}
</style>